// 表格数据
import type { ColumnsType } from "antd/es/table";
import { Avatar, Tag, Space, Button } from "antd";
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";

// Avatar, Tag, Space, DeleteOutlined,EditOutlined
const columns: ColumnsType<USER.Item> = [
  {
    title: "编号",
    dataIndex: "user_id",
    align: "center",
    width: 100,
  },
  {
    title: "所属角色",
    dataIndex: "role_name",
    align: "center",
    width: 150,
  },
  {
    title: "姓名",
    dataIndex: "username",
    align: "center",
    width: 150,
    ellipsis: true,
  },
  {
    title: "头像",
    dataIndex: "avatar",
    render: (_: any, record: USER.Item) => {
      return <Avatar size={32} src={record.avatar} />;
    },
    width: 150,
    align: "center",
  },
  {
    title: "卡号",
    dataIndex: "money",
    render: (_: any, row: USER.Item) => {
      return row.card_number && <Tag color="#ff4d4f">{row.card_number}</Tag>;
    },
    width: 130,
    align: "center",
  },
  {
    title: "余额",
    dataIndex: "money",
    render: (_: any, record: USER.Item) => {
      return <span>${record.money}</span>;
    },
    width: 100,
    align: "center",
  },
  {
    title: "坐标",
    render: (_: any, record: USER.Item) => {
      return (
        <span>
          {record.lng},{record.lat}
        </span>
      );
    },
    width: 160,
    align: "center",
  },
  {
    ellipsis: true,
    title: "坐标地址",
    render: (_: any, record: USER.Item) => {
      return <span>{record.address}</span>;
    },
    width: 400,
    align: "center",
  },
  {
    title: "创建于",
    dataIndex: "created_at",
    align: "center",
    width: 200,
  },
  {
    title: "更新于",
    dataIndex: "updated_at",
    align: "center",
    width: 200,
  },
  {
    width: 230,
    fixed: "right",
    title: "操作",
    render: (_: any, record: USER.Item) => {
      return (
        <Space size="middle">
          <Button
            type="primary"
            shape="circle"
            size="small"
            onClick={() => {
              //   setEditUserState({
              //     isShow: true,
              //     row: record,
              //   });
            }}
          >
            <EditOutlined />
          </Button>
          <Button
            type="primary"
            icon={<span className="iconfont icon-fenpeijiaose"></span>}
            onClick={() => {
              //   setEditAssignRoleState({
              //     isShow: true,
              //     row: record,
              //   });
            }}
          ></Button>
          <Button
            type="primary"
            onClick={() => {
              //   setEditCardNumberState({
              //     isShow: true,
              //     row: record,
              //   });
            }}
            icon={<span className="iconfont icon-vipcard"></span>}
          ></Button>
          <Button
            type="primary"
            // onClick={() => navigate("/user/money")}
            icon={<span className="iconfont icon-chongzhi"></span>}
          ></Button>
          <Button
            type="primary"
            shape="circle"
            size="small"
            danger
            // onClick={useConfirm}
          >
            <DeleteOutlined />
          </Button>
        </Space>
      );
    },
  },
];

export default columns;
